import React, { useEffect, useState } from 'react';
import { Button, Select, Form, Input, DatePicker, Switch,  Table, message, Tag, Drawer, Tabs } from 'antd';

import type { ColumnsType } from 'antd/es/table';
import * as service from '../../../api/cyyindex'
import './approval.scss'
interface Props{

}
interface DataType {
  aid: number;
  name: string;
  age: number;
  address: string;
  tags: string[];
  supporter: boolean
  peison: boolean
}
function Approval(props: Props) {
  const [messageApi, contextHolder] = message.useMessage();
  const [approvalList,setApprovalList]=useState([])
  useEffect(() => {
    service.form_list1().then(res => {
      console.log(res)
      setApprovalList(res.data.data)
    })
  }, [])
  const onChange = (checked: boolean,id:any) => {
    console.log(`switch to ${checked}`);
    service.form_edit1({ aid: id, supporter:Number(checked) }).then(res => {
      console.log(res)
      messageApi.open({
        type: 'success',
        content: '修改成功',
      });
    })
    service.form_list1().then(res => {
      setApprovalList(res.data.data)
    })
  };
  const onChange1 = (checked: boolean,id:any) => {
    console.log(`switch to ${checked}`);
    service.form_edit2({ aid: id, peison: Number(checked) }).then(res => {
      console.log(res)
      messageApi.open({
        type: 'success',
        content: '修改成功',
      });
    })
    service.form_list1().then(res => {
      setApprovalList(res.data.data)
    })
  };
      const columns: ColumnsType<DataType> = [
    {
      title: '业务表单',
      dataIndex: 'mytable',
      key: 'mytable',

    },
    {
      title: '表单类别',
      dataIndex: 'mytype',
      key: 'mytype',
    },
    {
      title: '允许后台申请',
      dataIndex: 'supporter',
      key: 'supporter',
      render:(_, record, ) =>{
          return (
            <Switch defaultChecked={record.supporter} onChange={(e)=>{onChange(e,record.aid)}}  />
          )
      },
    },

    {
      title: '允许员工申请',
      key: 'person',
      dataIndex: 'person',
       render:(value, record,) =>{
          return (
            <Switch  defaultChecked={record.peison} onChange={(e)=>{onChange1(e,record.aid)}} />
          )
      },
    },
    
    
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>

          <Tag >配置审批表单</Tag>
        </>
      ),
    },
  ];
    return (
      <div className='approval'> 
        {contextHolder}
        <p className='title'>人事审批表单设置</p>
          <div className='box'>
            <p>审批表单</p>
             <Table columns={columns} dataSource={approvalList} />
          <Button type="primary">保存</Button>
          </div>
        </div>
    );
}

export default Approval;